<template>
    <div class="spry">
        <section class="section-1">
            <!-- <img src="https://cdn.swellpro.com/newSpry/Compact & Portable.jpg" alt=""> -->

            <!-- <div class="text-wrap"> -->
                <div class="container" data-aos="fade-up">
                    <div>
                        <p class="title">
                            Compact & Portable
                        </p>

                        <p class="description">
                            The Spry is compact, rugged and ready to join you on the water. The Spry comes complete with a custom, lightweight carry case so it’s easy to take with you on your next adventure
                        </p>
                    </div>
                </div>
            <!-- </div> -->
        </section>

        <section class="section-2">
            <!-- <img src="https://cdn.swellpro.com/newSpry/Completely Waterproof.jpg" alt=""> -->

            <!-- <div class="text-wrap"> -->
                <div class="container" data-aos="fade-up">
                    <div>
                        <p class="title">
                            Completely Waterproof 
                        </p>

                        <p class="description">
                            The Spry drone and its remote controller are waterproof and float. Purpose-built for action in the harsh marine environment with specially coated motors and corrosion resistant materials throughout. Land and take off from the water with total peace of mind.
                        </p>

                        <p class="description">
                            First-ever Waterproof Remote Controller – Relax and enjoy total freedom while filming, as your Spry remote controller can be used in the rain, sea spray and even take a dunking in the water. The joysticks, built-in monitor and all switches are protected against spray yet work smoothly and precisely.
                        </p>
                    </div>
                </div>
             <!-- </div> -->
        </section>

        

        <section class="section-3">
            <img src="https://cdn.swellpro.com/newSpry/Real 4K Camera.png" alt="">

            <div class="text-wrap">
                <div class="container" data-aos="fade-left">
                    <div>
                        <p class="title">
                            Real 4K Camera - Get the Big Picture
                        </p>

                        <p class="description">
                            Being small doesn't mean you have to compromise image quality. The Spry’s onboard camera features a Sony 1/2.3'' CMOS sensor paired with a lens that minimizes fisheye distortion for natural-looking images.
                        </p>

                        <p class="description">
                            With the Spry drone, capture the action in 4K video at 30 frames per second or take crisp 12MP photos.
                        </p>
                        <p class="description">
                            The Spry combines a vertical axis mechanical gimbal with optional electronic stabilization (EIS) to provide a dynamic, racing-drone point of view on the water impossible to get with any other drone. 
                        </p>
                        <p class="description">
                            Camera Dome - The Spry‘s 4K camera is completely enclosed in an optically-engineered, toughened glass dome that provides high transparency without distortion. A specially designed shade and glass coating help to filter out excessive glare and balance the harsh highlights often found on the water and snow. 
                        </p>
                    </div>
                </div>

                <div class="container container__mini">
                    <div class="item" data-aos="zoom-in-up">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-1.jpg" alt="">
                        <p class="description">
                            fisheye
                        </p>
                    </div>
                    <div class="item" data-aos="zoom-in-up" data-aos-delay="200">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-2.jpg" alt="">

                        <p class="description">
                            fisheye
                        </p>
                    </div>
                    <div class="item" data-aos="zoom-in-up" data-aos-delay="400">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-3.jpg" alt="">

                        <p class="description">
                            racing-drone point of view
                        </p>
                    </div>
                    <div class="item" data-aos="zoom-in-up">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-4.jpg" alt="">

                        <p class="description">
                            balance the harsh highlights
                        </p>
                    </div>
                    <div class="item" data-aos="zoom-in-up" data-aos-delay="200">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-5.jpg" alt="">

                        <p class="description">
                            take crisp 12MP photo
                        </p>
                    </div>
                    <div class="item" data-aos="zoom-in-up" data-aos-delay="400">
                        <img src="https://cdn.swellpro.com/newSpry/4K Camera-6.jpg" alt="">

                        <p class="description">
                            take crisp 12MP photo
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-4">
            <img src="https://cdn.swellpro.com/newSpry/Easy to Fly.jpg" alt="">

            <div class="text-wrap">
                <div class="container" data-aos="fade-up">
                    <p class="title">
                        Easy to Fly
                    </p>

                    <p class="description">
                        Fast, waterproof but easy and fun to fly. Fly in GPS mode for automatic hover and hold control or switch to ATTI flight mode for a more direct piloting experience. Circle mode automatically keeps the drone facing a central point as it orbits. External Switch ON/OFF - An external waterproof switch allows you to power on or off the spry without opening the hatch lid.
                    </p>
                </div>
            </div>
        </section>

        <section class="section-5">
           <div class="introduce" data-aos="zoom-in-up">
               <p class="title">
                   High Agility
               </p>

               <p class="description">
                   The Spry is designed from the ground up to achieve a new compact shape, which is streamlined for reduced drag and turbulence as well as being tough.<br/>
                   High-thrust motors and high-power ESCs push the speed limit of the Spry to over 65 KM/H in manual mode, easily take off from water, perform 3D flips and even dive briefly underwater. <br/>
                   The Spry drone is a dynamic drone for filming Boating, Surfing, Wakeboarding, Jet-skiing, Kayaking and Water skiing from a whole new perspective.
               </p>
           </div>

           <div class="situation">
               <div class="item" data-aos="zoom-in-up">
                    <img src="https://cdn.swellpro.com/newSpry/High Agility-1.jpg" alt="">

                    <div class="text-wrap">
                        Boating
                    </div>
               </div>
               <div class="item" data-aos="zoom-in-up">
                   <img src="https://cdn.swellpro.com/newSpry/High Agility-2.jpg" alt="">

                   <div class="text-wrap">
                        Surfing
                    </div>
               </div>
               <div class="item" data-aos="zoom-in-up">
                   <img src="https://cdn.swellpro.com/newSpry/High Agility-3.jpg" alt="">

                   <div class="text-wrap">
                        Wakeboarding
                    </div>
               </div>
               <div class="item" data-aos="zoom-in-up">
                   <img src="https://cdn.swellpro.com/newSpry/High Agility-4.jpg" alt="">

                   <div class="text-wrap">
                        Jet-skiing
                    </div>
               </div>
               <div class="item" data-aos="zoom-in-up">
                   <img src="https://cdn.swellpro.com/newSpry/High Agility-5.jpg" alt="">

                   <div class="text-wrap">
                        keyaking
                    </div>
               </div>
           </div>
        </section>

        <section class="section-6">
            <img src="https://cdn.swellpro.com/newSpry/Autonomous Follow.jpg" alt="">

            <div class="text-wrap">
                <div class="container" data-aos="fade-up">
                    <p class="title">Autonomous Follow</p>

                    <p class="description">
                        The latest movement algorithms are built-in to make the auto follow-me and orbit functions smarter and more sensitive. Spry will follow the Remote Controller at a set distance and height - whether you are moving forward or backward, leading or chasing. The camera keeps you in the frame - no matter where your next move is. Achieve awesome footage single-handed.
                    </p>
                </div>
            </div>
        </section>

        <section class="section-7">
            <div class="container">
                <div class="top">
                    <div class="item" data-aos="fade-up">
                        <img src="https://cdn.swellpro.com/newSpry/forward.jpg" alt="">
                        <p class="title">forward</p>
                    </div>
                    <div class="item" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://cdn.swellpro.com/newSpry/forward.jpg" alt="">
                        <p class="title">backward</p>
                    </div>
                    <div class="item" data-aos="fade-up" data-aos-delay="400">
                        <img src="https://cdn.swellpro.com/newSpry/forward.jpg" alt="">
                        <p class="title">leading</p>
                    </div>
                    <div class="item" data-aos="fade-up" data-aos-delay="600">
                        <img src="https://cdn.swellpro.com/newSpry/forward.jpg" alt="">
                        <p class="title">chasing</p>
                    </div>
                </div>

                <div class="middle">
                    <div class="top">
                        <div class="item" data-aos="fade-up">
                            <img src="https://cdn.swellpro.com/newSpry/Smart Orbit-1.jpg" alt="">
                        </div>
                        <div class="item" data-aos="fade-up" data-aos-delay="200">
                            <img src="https://cdn.swellpro.com/newSpry/Smart Orbit-2.jpg" alt="">
                        </div>
                    </div>

                    <div data-aos="fade-up">
                        <p class="title">
                            Smart Orbit
                        </p>

                        <p class="description">
                            Two orbits mode allow you to capture the action from all angles.  Choose the radius and speed of orbit and the Spry will track around a point of interest. Turn on Follow Me mode and the Spry will keep the remote controller’s position in the middle of its circle - even if it is moving. 
                        </p>
                    </div>
                </div>

                <div class="bottom">
                    <img src="https://cdn.swellpro.com/newSpry/Return to Me.jpg" alt="" data-aos="fade-up">

                    <div data-aos="fade-up">
                        <p class="title">
                            Return to Me
                        </p>

                        <p class="description">
                            When you’re out on the water, you need a drone that keeps up with you. Most drones will return to their launch point if they lose reception. When the Spry flies out of range or you want it to return to you, the drone will automatically return to the position of the remote controller – wherever you are. With our "Return to Me" feature, your Spry will return to you even on a moving boat.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-8">
            <img src="https://cdn.swellpro.com/newSpry/APP Control.jpg" alt="">

            <div class="text-wrap">
                <div class="container" data-aos="fade-up">
                    <p class="title">
                        Full APP Control for Autonomous Flight
                    </p>

                    <p class="description">
                        More smart flight features are available by pairing your mobile device to the remote controller with the Spry  APP control：One Key Launch，Mission Planning，Tap-to-Fly，Follow Me，Auto-Return
                    </p>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import AOS from 'aos'
import 'aos/dist/aos.css'
export default {
  data () {
    return {
    };
  },

  head() {
    return {
        title: '',
        meta: [
            { hid: 'description', name: 'description', content: ''},
        ]
    }
  },

  components: {},

  computed: {},

  mounted() {
      AOS.init({
          duration: 600
      });
  },

  methods: {}
}

</script>
<style lang='stylus' scoped>
.spry
    .section
        &-1
            position relative
            background-position center
            background-size cover
            background-repeat no-repeat
            height 650px
            background-image url('https://cdn.swellpro.com/newSpry/Completely%20Waterproof-1.jpg')
            .container
                width 1000px
                display flex
                height 100%
                align-items center
                >div
                    width 500px
            // .text
            //     &-wrap
            //         position absolute
            //         left 0px
            //         top 0px
            //         width 100%
            //         height 100%
            //         .container
            //             width 800px
            //             color #000
            //             .title
            //                 padding-top 400px
        &-2
            position relative
            background-position center
            background-size cover
            background-repeat no-repeat
            height 650px
            background-image url('https://cdn.swellpro.com/newSpry/Compact%20&%20Portable-1.jpg')
            .container
                width 1000px
                color #fff
                >div
                    padding-top 470px
                    .title
                        padding-top 20px
                        padding-bottom 15px
        &-3
            position relative
            >img
                display block
                width 100%
            .text
                &-wrap
                    position absolute
                    left 0px
                    top 0px
                    width 100%
                    height 100%
                    .container
                        width 1000px
                        display flex
                        justify-content flex-end
                        color #000
                        >div
                            width 600px
                            .title
                                padding-top 70px
                                padding-bottom 15px
                        &__mini
                            padding-top 90px
                            width 850px
                            display flex
                            flex-flow row wrap
                            .item
                                flex 0 0 33.3333%
                                box-sizing border-box
                                padding 0 3px
                                >img
                                    display block
                                    width 100%
                                p
                                    padding 8px 0
        &-4
            position relative
            >img
                display block
                width 100%
            .text
                &-wrap
                    position absolute
                    left 0px
                    top 0px
                    width 100%
                    height 100%
                    .container
                        width 1000px
                        color #fff
                        text-align center
                        .title
                            padding 40px 0
                        .description
                            width 600px
                            margin 0 auto
        &-5
            .introduce
                color #000
                padding 40px 0
                text-align center
                .description
                    width 600px
                    margin 0 auto
            .situation
                display flex
                flex-flow row wrap 
                .item
                    flex 1
                    position relative
                    img
                        display block
                        width 100%
                    .text
                        &-wrap
                            position absolute
                            left 0px
                            top 0px
                            width 100%
                            height 100%
                            display flex
                            justify-content center
                            align-items center
                            color #fff
                            font-size 22px
                            font-weight 500
                            cursor pointer
        &-6
            position relative
            >img
                display block
                width 100%
            .text
                &-wrap
                    position absolute
                    left 0px
                    top 0px
                    width 100%
                    height 100%
                    .container
                        width 1000px
                        color #fff
                        .title
                            padding-top 260px
                        .description
                            width 400px
        &-7
            padding-bottom 50px
            .container
                width 1000px
                .top
                    display flex
                    padding-top 25px
                    .item
                        flex 1
                        box-sizing border-box
                        padding-right 10px
                        >img
                            display block
                            width 100%
                        .title
                            padding-top 15px
                        &:last-child
                            padding-right 0px
                .middle
                    padding 0px
                    .top
                        padding 0px
                    .title
                        padding 15px 0
                    .description
                        padding-bottom 25px
                .bottom
                    >img
                        display block
                        width 100%
                    .title
                        padding 15px 0
        &-8
            position relative
            >img
                display block
                width 100%
            .text
                &-wrap
                    position absolute
                    left 0px
                    top 0px
                    width 100%
                    height 100%
                    .container
                        color #fff
                        width 1000px
                        text-align center
                        .title
                            padding-top 40px
                        .description
                            width 650px
                            margin 0 auto
    .title
        font-size 20px
        font-weight 500
        padding-bottom 25px
    .description
        font-size 13px
</style>